import React from "react";
import {nanoid} from "nanoid"
import {Button} from "antd"

export default class PersonUi extends React.Component {

  state = {
    nameNode: "",
    ageNode: ""
  }

  addPerson = () => {
    this.props.add({
      id: nanoid(),
      name: this.state.nameNode.value,
      age: this.state.ageNode.value
    })
    this.state.nameNode.value = ""
    this.state.ageNode.value = ""
  }

  render() {
    return (
        <div>
          <h2>这是person组件，上方组件求和为{this.props.sum}</h2>
          <div>
            姓名：<input ref={c => this.state.nameNode = c} type="text"/>&nbsp;
            年龄：<input ref={c => this.state.ageNode = c} type="text"/>&nbsp;
            <Button type="primary" onClick={this.addPerson}>添加</Button>
          </div>
          <ul>
            {
              this.props.person.map(item => {
                return <li key={item.id}>id：{item.id}，姓名：{item.name}，年龄：{item.age}</li>
              })
            }
          </ul>
        </div>
    )
  }
}
